<!DOCTYPE html>
<html>
<head>
<title>订单</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="../../css/bootstrap.min.css">
<link rel="stylesheet" href="../../css/AdminLTE.min.css">
<link rel="stylesheet" href="../../css/font-awesome.min.css">
<link rel="stylesheet" href="../../plugins/jqgrid/ui.jqgrid-bootstrap.css">
<link rel="stylesheet" href="../../plugins/ztree/css/metroStyle/metroStyle.css">
<link rel="stylesheet" href="../../plugins/bootstrap-table/bootstrap-table.min.css">
<link rel="stylesheet" href="../../css/all-skins.min.css">
<link rel="stylesheet" href="../../css/main.css">
<script src="../../libs/jquery.min.js"></script>
<script src="../../plugins/layer/layer.js"></script>
<script src="../../libs/bootstrap.min.js"></script>
<script src="../../libs/vue.min.js"></script>
<script src="../../plugins/jqgrid/grid.locale-cn.js"></script>
<script src="../../plugins/jqgrid/jquery.jqGrid.min.js"></script>
<script src="../../plugins/ztree/jquery.ztree.all.min.js"></script>
<script src="../../libs/app.js"></script>
<script src="../../plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="../../js/components.js"></script>
<script src="../../js/common.js"></script>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div id="rrapp" class="wrapper" v-cloak>

  <main-header></main-header>
  <main-sidebar></main-sidebar>
  <!-- =============================================== -->
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <content-header title="订单列表"></content-header>

    <!-- Main content -->
    <section class="content">
	<div v-show="showList">
		<div class="box">
			<div class="box-header with-border">
              <h3 class="box-title">列表</h3>
            </div><!-- /.box-header -->
            <div class="box-body">
				<div class="grid-btn">
					<div class="form-group col-sm-2">
						<input type="text" class="form-control" v-model="q.orderNumber" @keyup.enter="query" placeholder="订单编号">
					</div>
					<a class="btn btn-default" @click="query">查询</a>
					<button type="button" @click="exportExcel" class="btn btn-primary">导出</button>
				</div>
			    <table id="table"></table>
			</div>
		</div>
    </div>
    
    <div v-show="!showList">
    	<div class="row">
    		<div class="col-sm-6">
    			<div class="box">
					<div class="box-header with-border">
		              <h3 class="box-title">订单信息</h3>
		            </div><!-- /.box-header -->
		            <div class="box-body">
						<form class="form-horizontal">
							<div class="form-group">
							   	<div class="col-sm-2 control-label">订单编号</div>
							   	<div class="col-sm-7">
							      <div class="checkbox">
							   	  	<label>
							   	  		{{order.orderNumber}}
							   	  	</label>
							   	  </div>
							    </div>
							</div>
							<div class="form-group">
							   	<div class="col-sm-2 control-label">订单金额</div>
							   	<div class="col-sm-7">
							      <div class="checkbox">
							   	  	<label>
							   	  		{{order.totalAmount}}
							   	  	</label>
							   	  </div>
							    </div>
							</div>
							<div class="form-group">
							   	<div class="col-sm-2 control-label">订单状态</div>
							   	<div class="col-sm-7">
							      <div class="checkbox">
							   	  	<label v-if="order.orderStatus == 0">
							   	  		已取消
							   	  	</label>
							   	  	<label v-if="order.orderStatus == 1">
							   	  		待付款
							   	  	</label>
							   	  	<label v-if="order.orderStatus == 2">
							   	  		待发货
							   	  	</label>
							   	  	<label v-if="order.orderStatus == 3">
							   	  		待收货
							   	  	</label>
							   	  	<label v-if="order.orderStatus == 4">
							   	  		已完成
							   	  	</label>
							   	  </div>
							    </div>
							</div>
							<div class="form-group">
							   	<div class="col-sm-2 control-label">下单时间</div>
							   	<div class="col-sm-7">
							      <div class="checkbox">
							   	  	<label>
							   	  		{{order.createTime}}
							   	  	</label>
							   	  </div>
							    </div>
							</div>
						</form>
					</div>
				</div>
    		</div>
    		<div class="col-sm-6">
	    		<div class="box">
				<div class="box-header with-border">
	              <h3 class="box-title">收货地址</h3>
	            </div><!-- /.box-header -->
	            <div class="box-body">
					<form class="form-horizontal">
						<div class="form-group">
						   	<div class="col-sm-2 control-label">联系人</div>
						   	<div class="col-sm-7">
						   	  <div class="checkbox">
						   	  	<label>
						   	  		{{order.orderShipment.contacts}}
						   	  	</label>
						   	  </div>
						    </div>
						</div>
						<div class="form-group">
						   	<div class="col-sm-2 control-label">手机</div>
						   	<div class="col-sm-7">
						      <div class="checkbox">
						   	  	<label>
						   	  		{{order.orderShipment.mobile}}
						   	  	</label>
						   	  </div>
						    </div>
						</div>
						<div class="form-group">
						   	<div class="col-sm-2 control-label">省/市/区</div>
						   	<div class="col-sm-7">
						   	  <div class="checkbox">
						   	  <label>
						      {{order.orderShipment.provinceName}}/{{order.orderShipment.cityName}}/{{order.orderShipment.districtName}}
						      </label>
						      </div>
						    </div>
						</div>
						<div class="form-group">
						   	<div class="col-sm-2 control-label">详细地址</div>
						   	<div class="col-sm-7">
						      <div class="checkbox">
						   	  	<label>
						   	  		{{order.orderShipment.userAdress}}
						   	  	</label>
						   	  </div>
						    </div>
						</div>
					</form>
				</div>
			</div>
    		</div>
    	</div>
    
    	<div class="box">
			<div class="box-header with-border">
              <h3 class="box-title">订单商品</h3>
            </div><!-- /.box-header -->
            <div class="box-body">
				<table class="table table-bordered">
					<thead>
						<tr>
							<th>商品图片</th>
							<th>商品名称</th>
							<th>购买数量</th>
							<th>价格</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="orderGoods in order.orderGoodsList">
							<td>
								<img alt="" :src="orderGoods.picUrl" width="100px" height="100px">
							</td>
							<td>{{orderGoods.goodsName}}</td>
							<td>{{orderGoods.num}}</td>
							<td>{{orderGoods.price}}</td>
						</tr>
					</tbody>
				</table>
				
				<br>
				<input type="button" class="btn btn-warning" @click="reload" value="返回"/>
			</div>
		</div>
	</div>
	</section>
	</div>
</div>

<script src="../../js/modules/oms/order.js"></script>
</body>
</html>